<template>
  <div class="pcHome">
    <Header
      class="homeHeader"
      @message="message"
      @home="home"
      @toAccount="toAccount"
    />
    <TopGames @getGameList="getGameList" />
    <div class="banner">
      <el-carousel :interval="3000" arrow="always">
        <el-carousel-item :key="1">
          <img
            src="@/assets/img/pcImg/banner.chess.png"
            alt=""
            @click="
              $router.push({
                name: 'Chess',
                query: { id: getGameId($t('Chess'))?.id },
              })
            "
          />
        </el-carousel-item>
        <el-carousel-item :key="2">
          <img
            src="@/assets/img/pcImg/banner.live.png"
            alt=""
            @click="
              $router.push({
                name: 'Live',
                query: { id: getGameId($t('LIVE'))?.id },
              })
            "
          />
        </el-carousel-item>
        <el-carousel-item :key="3">
          <img
            src="@/assets/img/pcImg/banner.slot.png"
            alt=""
            @click="
              $router.push({
                name: 'Slots',
                query: { id: getGameId($t('Slots'))?.id },
              })
            "
          />
        </el-carousel-item>
        <el-carousel-item :key="4">
          <img
            src="@/assets/img/pcImg/banner.sport.png"
            alt=""
            @click="
              $router.push({
                name: 'sport',
                query: { id: getGameId($t('sport'))?.id },
              })
            "
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="sound">
      <img src="@/assets/img/pcImg/sound.png" width="18" alt="" />
      <span>{{ $t("Announcement") }}</span>
    </div>
    <div class="content">
      <div class="main">
        <component
          :is="activeName"
          @operate="operate"
          v-if="activeName"
          :gamesList="gamesList"
        ></component>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from "./pcComponents/header.vue";
import Footer from "./pcComponents/footer.vue";
import Main from "./pcComponents/main.vue";
import AccountInfo from "./pcComponents/accountInfo.vue";
import Register from "./pcComponents/register.vue";
import TopGames from "@/components/topGames.vue";
export default {
  name: "Home",
  components: { Header, Footer, Main, AccountInfo, Register, TopGames },
  data() {
    return {
      isLogin: localStorage.getItem("TOKEN") ? true : false,
      activeName: "Main",
      gamesList: [],
    };
  },
  methods: {
    operate(name) {
      if (name === "register") {
        this.$router.push("/register");
      } else {
        this.activeName = "AccountInfo";
        this.$router.push({ name });
      }
    },
    message() {
      this.activeName = "AccountInfo";
    },
    home() {
      this.activeName = "Main";
      if (this.$route.path !== "/") {
        this.$router.push("/");
      }
    },
    toAccount() {
      this.activeName = "AccountInfo";
    },
    toFishingGame() {
      this.$router.push({ name: "fish" });
    },
    getGameList(data) {
      this.gamesList = data;
    },
    getGameId(game) {
      return this.gamesList.find((item) => {
        return item.name == game;
      });
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler: function (val) {
        if (val.path === "/") {
          this.activeName = "Main";
        } else {
          this.activeName = "AccountInfo";
        }
      },
      // 深度观察监听
      // deep: true,
    },
  },
};
</script>
<style lang="less">
.pcHome {
  width: 100%;
  height: 100%;
  background: #fff !important;
  .homeHeader {
    width: 100%;
    height: 50px;
    z-index: 100;
  }
  .banner {
    width: 100%;
    .el-carousel__container {
      height: 400px;
    }
    img {
      width: 100%;
      height: 100%;
      // object-fit: cover;
      object-position: center center;
    }
  }
  .sound {
    background: #fff;
    height: 30px;
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    span {
      margin-left: 3px;
      color: #333;
    }
  }
  .content {
    background: #f2f5f8;
    padding-bottom: 200px;
    height: 100%;
    .main {
      width: 1200px;
      margin: auto;
      padding: 20px 0;
    }
  }
}
</style>
